<template>
    <div>
        <div class="summernoteBox" v-if="true"></div>
    </div>
</template>


<script>

    /**
     * 关于继承富文本注意点：
     * 1、引入jquery和bootsrap，使其可以正常使用
     * 2、局部引入
     * 3、部分采用下载后集成，没有使用版本依赖
     **/


    //富文本
    // import 'summernote'
    // import 'summernote/dist/lang/summernote-zh-CN'

    import $ from 'jquery'
    import 'bootstrap/dist/js/bootstrap.bundle.min'
    import 'bootstrap/dist/css/bootstrap.css'
    import 'summernote'
    import 'summernote/dist/summernote.css'

    export default {
        props: {
            summerNoteVal: {
                type: String,
                default: ''
            }
        },
        watch: {
            summerNoteVal: function (val) {
                $('.summernoteBox').summernote('code', val);
            }
        },
        mounted() {

            let self = this;
            self.summernoteInit().then(() => {
                // summernote发生改变
                $('.summernoteBox').on('summernote.change', function (we, contents, $editable) {
                    self.summerNoteChange();
                });
                //初始赋值
                $('.summernoteBox').summernote('code', self.summerNoteVal);
            })


            // mounted中加入下面这段
            window.uploadVideo = function () {
                vm.showLoading = true // 因ship上传比较耗时，所以加了个loading提示
                upload($('#video')[0].files[0]).then(url => {// upload是自定义的上传文件函数，这里是上传成功的回调，拿到视频的url
                    var node = document.createElement('div') // 创建节点，用于包裹视频，再加这一层是方便调视频样式
                    node.innerHTML = '<video controls="controls" style="max-width:100%;" src="' + url + '" />'
                    node.cssText = 'width:100%;text-aligen:center;'
                    $('#summernote').summernote('insertNode', node)// 插入视频
                    vm.showLoading = false // 视频上传结束，去掉loading提示
                })
            }
            var myVideoBtn = function (context) {
                var ui = $.summernote.ui
                // create button
                var button = ui.button({
                    contents: '<i class="rich-video-icon"/><input title="视频" onchange="uploadVideo()" type="file" id="videoInput" accept="video/*" style="opacity: 0; filter:Alpha(opacity=0);width:20px;height: 20px;margin-left: -20px;position:absolute;">', // 这个是展示在富文本顶部的操作图标，这个rich-video-icon是自己写的
                    // tooltip: ''// todo 这个视频提示报错，未知原因
                    // click: function() {// 点击按钮触发事件，这边不需要用到
                    // context.invoke('editor.insertText', 'xxx')
                    // }
                })
                return button.render() // return button as jquery object
            }

        },
        created() {

        },
        methods: {
            summernoteInit() {//编辑器初始化
                // $('.summernoteBox').summernote({
                //     height: 200,
                //     tabsize: 2,
                //     lang: 'zh-CN'
                // });

                // let self=this;
                return new Promise(resolve => {

                    //初始化摘要内容富文本编辑器
                    // $('.summernoteBox').summernote({
                    //     lang: 'zh-CN',//语言
                    //     placeholder: '请输入内容',//提示语
                    //     height: 200,//高度
                    //     width: 'auto',//宽度  也可以指定宽度
                    //     htmlMode: true,
                    //     fontNames: [//字体类型配置
                    //         '宋体','微软雅黑','楷体','黑体','隶书'
                    //     ],
                    //     callbacks: {//回调函数
                    //         onSubmit: function() {
                    //             // vm.richContent = $('#summernote').summernote('code')
                    //         },
                    //         onKeyup:function(){
                    //             //
                    //         }
                    //     }
                    // });

                    $('.summernoteBox').summernote({
                        height: 200,
                        tabsize: 2,
                        lang: 'zh-CN'
                    });

                    resolve();
                });

            },
            summerNoteChange() {//富文本编辑器发生改变
                this.$emit('input', $('.summernoteBox').summernote('code'));
            },
        },
    }
</script>

<style scoped>


</style>